<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_element": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_element": "active",
      "navbar": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
              <li class="breadcrumb-item active" aria-current="page">Navbar</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="td-title">Navbar</h1>
        <p class="td-lead">Responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. Read the <a href="https://getbootstrap.com/docs/4.2/components/navbar/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Basic Navbar</h4>
        <p class="mg-b-30">Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the large breakpoint.</p>

        <div data-label="Example" class="td-example">
          <nav class="navbar navbar-expand-lg navbar-light bg-light bd">
            <a class="navbar-brand tx-bold tx-spacing--2 order-1" href="#">LOGO</a>
            <button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <i data-feather="menu" class="wd-20 ht-20"></i>
            </button>

            <div class="collapse navbar-collapse order-2" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact</a>
                </li>
              </ul>
              <form class="form-inline mg-t-10 mg-lg-0">
                <input class="form-control tx-13 wd-150-f mg-r-5" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-primary" type="submit">Search</button>
              </form>
            </div>
          </nav>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;nav class=&quot;navbar navbar-expand-lg bg-gray-100 bd&quot;&gt;
  &lt;a class=&quot;navbar-brand tx-bold tx-spacing--2 order-1&quot; href=&quot;#&quot;&gt;LOGO&lt;/a&gt;
  &lt;button class=&quot;navbar-toggler order-2&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
    &lt;i data-feather=&quot;menu&quot; class=&quot;wd-20 ht-20&quot;&gt;&lt;/i&gt;
  &lt;/button&gt;

  &lt;div class=&quot;collapse navbar-collapse order-2&quot; id=&quot;navbarSupportedContent&quot;&gt;
    &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
      &lt;li class=&quot;nav-item active&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;form class=&quot;form-inline mg-t-10 mg-lg-0&quot;&gt;
      &lt;input class=&quot;form-control wd-150-f mg-r-5&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
      &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/nav&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Brand Content</h4>
        <p class="mg-b-30">The <code>.navbar-brand</code> can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.</p>

        <div data-label="Example" class="td-example">
          <nav class="navbar navbar-light bg-light">
            <a class="navbar-brand tx-bold tx-spacing--2" href="#">LOGO</a>
          </nav>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;nav class="navbar navbar-light bg-light"&gt;
  &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
&lt;/nav&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">Nav Content</h4>
        <p class="mg-b-30">Navbar navigation links build on our nav options with their own modifier class and require the use of toggler classes for proper responsive styling. </p>

        <div data-label="Example" class="td-example">
          <nav class="navbar navbar-expand-lg navbar-light bg-light bd">
            <a class="navbar-brand tx-bold tx-spacing--2" href="#">LOGO</a>
            <button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <i data-feather="menu" class="wd-20 ht-20"></i>
            </button>
            <div class="collapse navbar-collapse order-2" id="navbarNav">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact</a>
                </li>
              </ul>
            </div>
          </nav>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light bd&quot;&gt;
  &lt;a class=&quot;navbar-brand tx-bold tx-spacing--2&quot; href=&quot;#&quot;&gt;LOGO&lt;/a&gt;
  &lt;button class=&quot;navbar-toggler order-2&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
    &lt;i data-feather=&quot;menu&quot; class=&quot;wd-20 ht-20&quot;&gt;&lt;/i&gt;
  &lt;/button&gt;
  &lt;div class=&quot;collapse navbar-collapse order-2&quot; id=&quot;navbarNav&quot;&gt;
    &lt;ul class=&quot;navbar-nav&quot;&gt;...&lt;/ul&gt;
  &lt;/div&gt;
&lt;/nav&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Form Content</h4>
        <p class="mg-b-30">Place various form controls and components within a navbar.</p>

        <div data-label="Example" class="td-example">
          <nav class="navbar navbar-light bg-light bd">
            <form class="form-inline mg-l-auto">
              <input class="form-control mg-r-5 tx-13" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-primary mg-t-10 mg-sm-t-0" type="submit">Search</button>
            </form>
          </nav>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;nav class=&quot;navbar navbar-light bg-light&quot;&gt;
  &lt;form class=&quot;form-inline mg-l-auto&quot;&gt;
    &lt;input class=&quot;form-control mg-r-5&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
    &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
  &lt;/form&gt;
&lt;/nav&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Text Content</h4>
        <p class="mg-b-30">Navbars may contain bits of text with the help of <code>.navbar-text</code>. This class adjusts vertical alignment and horizontal spacing for strings of text.</p>

        <div data-label="Example" class="td-example">
          <nav class="navbar navbar-light bg-light">
            <span class="navbar-text">
              Navbar text with an inline element
            </span>
          </nav>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;nav class=&quot;navbar navbar-light bg-light&quot;&gt;
  &lt;span class=&quot;navbar-text&quot;&gt;
    Navbar text with an inline element
  &lt;/span&gt;
&lt;/nav&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section6" class="mg-b-10">Color Scheme</h4>
        <p class="mg-b-30"></p>

        <div data-label="Example" class="td-example">
          <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand tx-bold tx-spacing--2 order-1" href="#">LOGO</a>
            <button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
              <i data-feather="menu" class="wd-20 ht-20"></i>
            </button>

            <div class="collapse navbar-collapse order-2" id="navbarSupportedContent2">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact</a>
                </li>
              </ul>
              <form class="form-inline mg-t-10 mg-lg-0">
                <input class="form-control bd-0 tx-13 wd-150-f mg-r-5" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-primary" type="submit">Search</button>
              </form>
            </div>
          </nav>

          <nav class="navbar navbar-expand-lg navbar-dark bg-primary mg-t-10">
            <a class="navbar-brand tx-bold tx-spacing--2 order-1" href="#">LOGO</a>
            <button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent3" aria-controls="navbarSupportedContent3" aria-expanded="false" aria-label="Toggle navigation">
              <i data-feather="menu" class="wd-20 ht-20"></i>
            </button>

            <div class="collapse navbar-collapse order-2" id="navbarSupportedContent3">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact</a>
                </li>
              </ul>
              <form class="form-inline mg-t-10 mg-lg-0">
                <input class="form-control bd-0 tx-13 wd-150-f mg-r-5" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-dark" type="submit">Search</button>
              </form>
            </div>
          </nav>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;...&lt;/nav&gt;
&lt;nav class="navbar navbar-expand-lg navbar-dark bg-primary"&gt;...&lt;/nav&gt;</code></pre>

@@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Basic Navbar</a>
            <a href="#section2" class="nav-link">Brand Content</a>
            <a href="#section3" class="nav-link">Nav Content</a>
            <a href="#section4" class="nav-link">Form Content</a>
            <a href="#section5" class="nav-link">Text Content</a>
            <a href="#section6" class="nav-link">Color Schemes</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->


    @@include('./_script.html',{})

    <script>
      $(function(){
        'use strict'
 
      });
    </script>
  </body>
</html>
